<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>
<%
	String path=request.getContextPath();
	String basePath=request.getScheme()+"://"
			+request.getServerName()+":"+request.getServerPort()
			+path+"/";
%>
<!DOCTYPE html>
<html>
<base href="<%=basePath%>">
<head>
	<c:if test="${otherUser==null }">
	<title>个人中心</title>
	</c:if>
	<c:if test="${otherUser!=null }">
	<title>${otherUser.getUserName() }的空间</title>
	</c:if>
	<meta charset="utf-8">
	<link rel="icon" href="img/logo.png" sizes="32x32">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/problem.css">
	<link rel="stylesheet" href="styles/default.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/popper.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script src="layui/layui.js"></script>
	<style type="text/css">
		.img-circle{
			border-radius: 50%;
		}
		.center-block {
		    display: block;
		    margin-right: auto;
		    margin-left: auto;
		}
		.img-responsive{
			max-width: 100%;
    		height: auto;
		}
		.user-myspace-base-person-info-bottom-item {
		    font-size: 13px;
		    font-family: Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
		    cursor: pointer;
		}
		.user-myspace-base-person-info-bottom-item-title {
		    color: #99a2aa;
		}
		.user-myspace-base-person-info-bottom-item-content {
		    margin-top: 5px;
		    color: #222;
		}
		.col-xs-4 {
		    width: 33.33333333%;
		}
		.nav-item a{
			color: #337ab7;
		}
		.problem-item{
			margin-right: 10px;
			font-size: 17px;
		}
		.dropdown-menu .link-myspace:hover{
			color:black;
		}
	</style>
</head>
<body style="background:url('img/ba.png');background-size: auto;background-color: rgba(0,0,0,0.1);">
	<!-- 顶部导航 -->
	<div class="nav fixed-top">
		<div class="container">
			<div class="top-title"><span>OnlineJudge</span></div>
			<div class="top-list">
				<ul>
					<li class=""><a href="problem/list?pager.offset=0">题库</a></li>
					<li class=""><a href="solution/list?pager.offset=0">题解</a></li>
					<li class=""><a href="community/list?pager.offset=0">论坛</a></li>
				</ul>
			</div>
			<div class="top-last">
				<c:if test="${currentUser!=null }">
					<a href="user/myspace" class="dropdown-toggle" data-toggle="dropdown">
	                    <img class="img-circle" src="${pageContext.request.contextPath }/img/${currentUser.getUserImg() }" style="margin: -5px;" width="35px">
	                    &nbsp;
	                    <strong id="id_user_username">${currentUser.getUserName() }</strong>
	                    <b class="caret"></b>
                	</a>
                	<ul class="dropdown-menu" style="width:50px;margin-top:16px;font-size: 13px;text-align: center">
                		<li style="padding: 0;"><hr style="margin:0;"><a class="link-myspace" href="user/myspace" style="font-size:14px;">个人中心</a></li>
                		<li style="padding: 0;"><hr style="margin:0;"><a class="btn btn-outline-primary btn-lg btn-block" role="button" href="user/logout" style="font-size:14px;">退出登录</a></li>
                    </ul>
				</c:if>
				<!-- 
				<c:if test="${currentUser==null }">
					<a href="javascript:void(0);" onclick="syalert.syopen('alert1')">登录/注册</a>
				</c:if>
				 -->
			</div>
		</div>
	</div>
	<!-- 内容 -->
	<div class="container" style="margin-top: 70px;">
		<div class="row">
			<div class="col-xs-4 col-sm-4 col-md-3">
				<div class="panel panel-default">
					<c:if test="${otherUser==null }">
					<a class="btn btn-primary" href="user/form" role="button" style="font-size: 14px;margin-top:10px;margin-left: 15px;">修改信息</a>
    				</c:if>
    				<div class="panel-body" align="center">
    					<c:if test="${otherUser!=null }">
    					<a href="#">
			                <img class="img-responsive center-block" src="${pageContext.request.contextPath }/img/${otherUser.getUserImg() }" alt="头像">
			            </a>
			        	</c:if>
			       	 	<c:if test="${otherUser==null }">
    					<a href="#">
			                <img class="img-responsive center-block" src="${pageContext.request.contextPath }/img/${currentUser.getUserImg() }" alt="头像">
			            </a>
			        	</c:if>
			            <hr>
			            <c:if test="${otherUser!=null }">
			            <div class="caption">
				            <p class="text-center" style="font-size: 18px; font-weight: 700;">${otherUser.getUserName() }</p>
				            <p class="text-center" style="font-size: 14px; "></p>
				        </div>
				        </c:if>
				        <c:if test="${otherUser==null }">
			            <div class="caption">
				            <p class="text-center" style="font-size: 18px; font-weight: 700;">${currentUser.getUserName() }</p>
				            <p class="text-center" style="font-size: 14px; "></p>
				        </div>
				        </c:if>
				        <hr>
				        <div class="row">
				            <div class="col-xs-4">
				                <a href="#" style="text-decoration: none;">
				                    <div class="user-myspace-base-person-info-bottom-item" title="0">
				                        <div class="user-myspace-base-person-info-bottom-item-title">题目数</div>
				                        <div class="user-myspace-base-person-info-bottom-item-content">${problemList.size() }</div>
				                    </div>
				                </a>
				            </div>
				            <div class="col-xs-4">
				                <a href="#" style="text-decoration: none;">
				                    <div class="user-myspace-base-person-info-bottom-item" title="0">
				                        <div class="user-myspace-base-person-info-bottom-item-title">题解数</div>
				                        <div class="user-myspace-base-person-info-bottom-item-content">${solutionList.size() }</div>
				                    </div>
				                </a>
				            </div>
				            <div class="col-xs-4">
				                <a href="#" style="text-decoration: none;">
				                    <div class="user-myspace-base-person-info-bottom-item" title="0">
				                        <div class="user-myspace-base-person-info-bottom-item-title">文章数</div>
				                        <div class="user-myspace-base-person-info-bottom-item-content">${communityList.size() }</div>
				                    </div>
				                </a>
				            </div>
				        </div>
    				</div>
    			</div>
			</div>
			<div class="col-xs-8 col-sm-8 col-md-9">
                <div class="panel panel-default">
                    <div class="panel-body">
                    	<ul class="nav nav-tabs" id="myTab" role="tablist" style="background-color: white;">
						    <li class="nav-item">
						        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#admin" role="tab" aria-controls="home" aria-selected="true">
						            <h6>题目</h6>
						        </a>
						    </li>
						    <li class="nav-item">
						        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#edit" role="tab" aria-controls="profile" aria-selected="false">
						            <h6>题解</h6>
						        </a>
						    </li>
						    <li class="nav-item">
						        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#audit" role="tab" aria-controls="contact" aria-selected="false">
						            <h6>文章</h6>
						        </a>
						    </li>
						</ul>
						<div class="tab-content border border-top-0" id="myTabContent" style="box-shadow: 0 5px 15px 0 rgba(0,0,0,0.08);border-color: #ddd;border-radius: 4px;padding: 20px;">
						    <div class="tab-pane fade show active" id="admin" role="tabpanel" aria-labelledby="home-tab">
						        <ul class="list-group" style="flex-direction: row;">
						        	<c:forEach var="problem" items="${problemList }">
						        		<li class="problem-item"><a href="problem/successItem?problemId=${problem.getProblemId()}">${problem.getProblemId() }</a></li>
						        	</c:forEach>
						        </ul>
						    </div>
						    <div class="tab-pane fade" id="edit" role="tabpanel" aria-labelledby="profile-tab">
						        <ul class="list-group" style="flex-direction: row;">
						        	<c:forEach var="solution" items="${solutionList }">
						        		<li class="problem-item"><a href="solution/item?solutionId=${solution.getSolutionId() }">${solution.getProblemId() } 题解</a></li>
						        	</c:forEach>
						        </ul>
						    </div>
						    <div class="tab-pane fade" id="audit" role="tabpanel" aria-labelledby="contact-tab">
						        <div class="list-group">
						        	<c:forEach var="community" items="${communityList }">
									  	<a href="community/item?communityId=${community.getCommunityId() }" class="list-group-item list-group-item-action">
									    	<span style="float: left;">${community.getItemTitle() }</span>
									    	<span style="float: right;">[${community.getItemDate() }]</span>
									  	</a>
								  	</c:forEach>
								</div>
						    </div>
						</div>
                    </div>
                </div>
            </div>
		</div>
	</div>
	<script type="text/javascript">
		
	</script>
</body>
</html>